<!--  -->
<template>
  <div>
    <demo></demo>

    <div class="order">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="order_id" label="订单号" width="330">
        </el-table-column>
        <el-table-column prop="total_count" label="总数量" width="180">
        </el-table-column>

        <el-table-column prop="total_amount" label="总金额" width="180">
        </el-table-column>

        <el-table-column prop="create_time" label="下单时间" width="260">
        </el-table-column>

        <el-table-column prop="status" label="状态" width="170">
        </el-table-column>

        <el-table-column label="操作" width="280">
          <template slot-scope="scope">
            <el-button
              @click="detail_cli(scope.row.order_id)"
              icon="el-icon-zoom-in"
              type="primary"
              >详情</el-button
            >
            <el-button @click="commment_cli" icon="el-icon-edit" type="warning"
              >评价</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 评论 -->
      <el-dialog
        title="评论"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-rate v-model="value2" :colors="colors"> </el-rate>
        <div class="demo-input-suffix">
          <h2>评价：</h2>
          <el-input
            type="textarea"
            :rows="7"
            placeholder="请输入评价内容"
            v-model="textarea"
          />
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <!-- 详情 -->
      <el-dialog title="订单详情" :visible.sync="detail" width="50%">
        <el-table :data="detail_data" style="width: 100%">
          <el-table-column prop="book_name" label="书名" width="280">
          </el-table-column>
          <el-table-column prop="single_price" label="单价" width="180">
          </el-table-column>
          <el-table-column prop="count" label="数量" width="180">
          </el-table-column>
          <el-table-column prop="total_price" label="总价" width="180">
          </el-table-column>
        </el-table>
        <!-- 只有一页可以隐藏 -->

       

        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="cloBtn"
            >关闭</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import demo from "@/components/nav.vue";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    demo,
  },
  data() {
    //这里存放数据
    return {
      detail_page_size: 5, //每页显示数量
      detail_page_count: 5,
      detail_page_total: 10,
      is_hidden: false,
      detail_data: [
        {
          book_name: "linux从入门到入狱",
          single_price: 68.88,
          count: 5,
          total_price: 666.66,
        },
        {
          book_name: "java从入门到精通",
          single_price: 78.88,
          count: 7,
          total_price: 777.66,
        },
        {
          book_name: "linux从入门到入狱",
          single_price: 68.88,
          count: 5,
          total_price: 666.66,
        },
        {
          book_name: "java从入门到精通",
          single_price: 78.88,
          count: 7,
          total_price: 777.66,
        },
        {
          book_name: "linux从入门到入狱",
          single_price: 68.88,
          count: 5,
          total_price: 666.66,
        },
      ],
      textarea: "",
      dialogVisible: false,
      detail: false,
      value2: null,
      colors: ["#99A9BF", "#F7BA2A", "#FF9900"],
      tableData: [],
      user_id: "",
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {

    cloBtn(){
      this.detail = false;
      this_.detail_data = [];
    },


    handleClose(done) {
      this.$confirm("是否取消本次评论？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    commment_cli() {
      this.dialogVisible = true;
    },
    detail_cli(order_id) {
      this.detail = true;
      let this_ = this;
      this.$http
        .get(
          `http://localhost:88/api/book/order/item/get/order/item/${order_id}`
        )
        .then(function (response) {
          if (response.data.code == 200) {
            console.log("orderItems==========", response);
            this_.detail_data = [];
            for (let i = 0; i < response.data.orderItems.length; i++) {
              this_.detail_data.push({
                book_name: response.data.orderItems[i].bookName,
                single_price: response.data.orderItems[i].price,
                count: response.data.orderItems[i].count,
                total_price: response.data.orderItems[i].totalPrice,
              });
            }
          }
        })
        .catch(function (err) {
          console.log(err);
        });
    },

    init_get_order() {
      // let token = this.$store.state.token;

      // if (token == null || token.trim() == "") {
      //   this.$router.push({
      //     path: "/login",
      //   });
      //   return;
      // }
      // let this_ = this;
      // this.$http
      //   .post(`http://localhost:88/api/book/user/verify/jwt/${token}`)
      //   .then(function (response) {
      //     if (response.data.code == 200) {
      //       this_.user_id = response.data.userId;
      //       this_.get_order(this_.user_id);
      //     }
      //   })
      //   .catch(function (err) {
      //     console.log(err);
      //   });

      let this_ = this;
      this.$http
        .post(`http://localhost:88/api/book/user/verify/jwt/cookie`)
        .then(function (response) {
          console.log(response);
          if (response.data.code == 200) {
             this_.user_id = response.data.userId;
             this_.get_order(this_.user_id);
          } else {
            this_.$router.push({
              path: "/login",
            });
          }
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    get_order() {
      let this_ = this;
      this.$http
        .get(`http://localhost:88/api/book/order/get/order/${this.user_id}`)
        .then(function (response) {
          if (response.data.code == 200) {
            this_.tableData = [];
            for (let i = 0; i < response.data.orders.length; i++) {
              this_.tableData.push({
                order_id: response.data.orders[i].orderId,
                total_count: response.data.orders[i].totalCount,
                total_amount: response.data.orders[i].totalAmount,
                create_time: response.data.orders[i].formatDate,
                status: this_.get_status(response.data.orders[i].status),
              });
            }
          }
        })
        .catch(function (err) {
          console.log(err);
        });
    },

    get_status(status) {
      if (status == 0) {
        return "待付款";
      }
      if (status == 1) {
        return "待发货";
      }
      if (status == 2) {
        return "已发货";
      }
      if (status == 3) {
        return "已完成";
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.init_get_order();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #e7f3e1;
}

.order {
  margin: 0 auto;
  width: 80%;
  background: blueviolet;
}

.detail_page {
  margin-top: 20px;
  margin-left: 38%;
  width: 200px;
}
</style>